import { Form,Row,Button,Col} from 'antd';
import React, {  useImperativeHandle, useRef } from 'react';
// import { request } from 'umi';
import CformItem from './c_formItem';

const App: React.FC<cType.formProTp> = React.forwardRef((props, ref) => {
  const formInnerRef: any = useRef();
  useImperativeHandle(ref, () => ({ ref: formInnerRef }));
  return (
    <Form
      name="basic"
      wrapperCol={{ span: 16 }}
      style={{ maxWidth: 600 }}
      initialValues={props.formData}
      autoComplete="off"
      ref={formInnerRef}
    >
      {props.formOption.items.map((item: any) => {
        console.log(item.type);

        return (
            <Row key={item.pname} gutter={24}>
            {item?.typeItem === 'add' &&
                <Form.List name={item.pname}>
                  {(fields, { add, remove }) => (
                    <>
                      <Form.Item>
                        <Button type="primary" onClick={() => add()} >
                          增加{item.plabel}
                        </Button>
                      </Form.Item>
                      {fields.map(({ key, name, ...restField }) => (
                      <Row key={key} gutter={24}>
                        {item.childitems.map((ite:any)=>( <Col span={ite.col||24} key={name+ite.pname}><CformItem restField={restField}  name={[name,ite.pname]} formItem={ite}></CformItem></Col>))}
                        <Form.Item >
                        <Button type="primary" onClick={() => remove(name)} danger>
                          删除{item.plabel}
                        </Button>
                      </Form.Item></Row>
                     ))}
                    </>
                  )}
                </Form.List>
            }
            {!item?.typeItem && <Col span={item.col||24} key={item.pname}><CformItem formItem={item}></CformItem></Col>}
          </Row>
        );
      })}
    </Form>
  );
});

export default App;
